<template>
    <el-dialog :model-value="props.isPromotion" :show-close="false" modal-class="customize-dialog"
        :append-to-body="true" :close-on-click-modal="false" align-center width="800">
        <template #header="{ titleId, titleClass }">
            <div class="flex justify-between items-center dialog-header">
                <div class="flex items-center">
                    <h4 :id="titleId" :class="titleClass">技术文章推广</h4>
                </div>
                <svg-icon size="16px" icon-class="close-line" @click="closeDialog"></svg-icon>
            </div>
        </template>
        <div class="flex items-center friendly-tips">
            <svg-icon size="18px" icon-class="information-2-fill"></svg-icon>友情提示：技术文章信息和关键词已经确认，推广后不可修改，是否确定推广？
        </div>
        <div class="flex items-center text-14px mt-16px">
            选择站点：<el-checkbox v-model="state.checkAll" :indeterminate="state.isIndeterminate"
                @change="handleCheckAllChange">
                全选 / 反选
            </el-checkbox>
        </div>
        <div class="websites">
             <el-checkbox-group v-model="state.checkedWebsites" @change="handleCheckedWebsitesChange">
            <ul>
                <li v-for="website in state.websites" :key="website.label"><el-checkbox :value="website.value"></el-checkbox></li>
            </ul>
            </el-checkbox-group>
        </div>
        <div class="flex flex-center mt-16px">
            <el-button @click="emit('closeDialog')">取消</el-button>
            <el-button @click="handleConfirm" type="primary">确定</el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
import type { CheckboxValueType } from 'element-plus'
import { WarningFilled,SuccessFilled } from '@element-plus/icons-vue'
import { promotionWebsite } from '@/utils/data'
import { promotionArticleApi,promotionArticleBatchApi } from '@/api/b2b'
import { confirmMessageBox } from '@/utils/elMessageBox'

const props = defineProps<{
    isPromotion: boolean,
    id: number,
    ids: []
}>()

const emit = defineEmits(['closeDialog'])

const state = reactive({
    checkAll: false,
    isIndeterminate: true,
    checkedWebsites: [] as any,
    websites: promotionWebsite
})

function handleCheckAllChange(val: CheckboxValueType) {
    if(val){
        state.websites.forEach(item => {
            state.checkedWebsites.push(item.value)
        })
    }else{
        state.checkedWebsites = []
    }
    state.isIndeterminate = false
}

function handleCheckedWebsitesChange(value: CheckboxValueType[]) {
    const checkedCount = value.length
    state.checkAll = checkedCount === state.websites.length
    state.isIndeterminate = checkedCount > 0 && checkedCount < state.websites.length
    state.checkedWebsites = value
}

function closeDialog() {
    emit('closeDialog')
}

async function handleConfirm(){
    if(!state.checkedWebsites.length){
        confirmMessageBox(WarningFilled, '请选择站点')
    }else{
        if(props.ids.length){
            const res:ResType = await promotionArticleBatchApi({
                ids: props.ids.join(','),
                checkqx1: state.checkedWebsites.join(',')
            })
            if(res.code === 200){
                confirmMessageBox(SuccessFilled, res.message, '','',() => {
                    emit('closeDialog')
                })
            }
        }else{
            const res:ResType = await promotionArticleApi({
                id: props.id,
                checkqx1: state.checkedWebsites.join(',')
            })
            if(res.code === 200){
                confirmMessageBox(SuccessFilled, res.message, '','',() => {
                    emit('closeDialog')
                })
            }
        }
        
    }
}

</script>

<style lang="scss" scoped>
.websites {
    width: 100%;
    border: 1px solid var(--menuBorderColor);
    padding: 12px 0;
    border-radius: 4px;
    margin-top: 5px;

    ul {
        overflow: hidden;

        li {
            width: 25%;
            float: left;
            font-size: 14px;
            line-height: 2;
            padding-left: 20px;
        }
    }
}
:deep(.el-checkbox__input.is-checked + .el-checkbox__label){
    color: #666666;
}
</style>